<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container justify-between">
      <div>
      </div>
      <div>
        <el-select @change='doSearch' style="width: 200px" class="filter-item" v-model="listQuery.log_type"
                   placeholder="操作类型">
          <el-option v-for="(item,index) in op_type_list" :key="item.data_value" :label="item.data_text"
                     :value="item.data_value"></el-option>
        </el-select>
      </div>
    </div>

    <el-table  ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
               border fit highlight-current-row style="width: 100%"  @selection-change="onSelectionChange"  height="500">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column align="left"  label="操作类型">
        <template slot-scope="scope">
          <span>{{scope.row.log_type | show_basedatas('log_type') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"  label="操作描述">
        <template slot-scope="scope">
          <span>{{scope.row.op }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"  label="操作人">
        <template slot-scope="scope">
          <span>{{scope.row.op_user_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"  label="ip地址">
        <template slot-scope="scope">
          <span>{{scope.row.ip }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"  label="操作时间">
        <template slot-scope="scope">
          <span>{{scope.row.create_time | beautiful_time }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                     :current-page="listQuery.pageNumber" :page-sizes="[12,50,100,10000]" :page-size="listQuery.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import waves from '@/directive/waves' // 水波纹指令
  import API from '@/api'
  import Http from '@/http'
  import Store from '@/store'
  import Msg from '@/utils/msg'
  import Utils from '@/utils/common'
  import _ from 'underscore'
  import Qiniu from '@/utils/qiniu'

  export default {
    directives: {waves},
    data() {
      return {
        dealing: false,
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          pageNumber: 1,
          pageSize: 12,
          keyword: '',
          log_type: ''
        },
        op_type_list: [{
          data_value: '',
          data_text: '全部类型'
        }].concat(Store.getters.basedata.log_type),
      }
    },
    filters: {},
    components: {},
    created() {
      this.loadList()
      this.link_type_list = Store.getters.basedata.link_type
      console.log("link_type_list",this.link_type_list)
    },
    computed: {
    },
    methods: {
      loadList() {
        this.listLoading = true
        Http.getModel(API.get_op_log_list, this.listQuery, false).then((json) => {
          this.loading = false
          if (json.code == 0) {
            this.list = json.data.list
            this.total = parseInt(json.data.total)
            this.listLoading = false
          }
        })
      },
      /***   公用部分 start ***/
      onSelectionChange(val) {
        this.multipleSelection = val;
      },
      doSearch() {
        this.listQuery.page = 1
        this.loadList()
      },
      onSizeChange(val) {
        this.listQuery.pageSize = val
        this.loadList()
      },
      onCurrentChange(val) {
        this.listQuery.pageNumber = val
        this.loadList()
      },
      /***   公用部分 end ***/
    }
  }
</script>
<style>

</style>
